
<template>
<div>
    <!-- 顶部滑动块 -->
    <!-- 把fullscreen 类名 去掉 不然div会占据整个屏幕  -->
    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <!-- 只有i==0 第一个才加 激活样式 mui-active -->
                <a @click="getPhotos" v-for="(item,i) in photoCategory" :key="item.id" :class="['mui-control-item', i == 0 ? 'mui-active' : '']" >
                    {{ item.title }}
                </a>
            </div>
        </div>
    </div>
    <!-- 图片列表区域 -->
    <ul>
        <!-- tap是vue的  移动端的点击事件 -->
        <router-link @tap="getPhotos" v-for="item in list" :key="item.id" :to="'/home/photoinfo/' + item.id" tag="li">
            <img width="100%" v-lazy="item.img_url">
            <div class="info">
                <h1 class="title">{{ item.title }}</h1>
                <div class="body">{{ item.summary }} </div>
            </div>
        </router-link>
    </ul>
</div>  
</template>

<script>
// 导入mui.min.js
import mui from "../../lib/js/mui.min.js"

export default{
    data(){
        return {
            photoCategory:[], // 分类列表
            list:[]         // 图片列表数组
        }
    },
    created(){
        this.getPhotos();
    },
    mounted(){
        this.getPhotoCategory();
        mui('.mui-scroll-wrapper').scroll({
	        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    methods:{
        getPhotoCategory(){
            // 获取所有的图片分类
            this.$http.get("http://127.0.0.1/vue.js/项目练习/api/json/getPhotoCategory.json").then(result => {
                result.body.message.unshift({title:"全部",id:0});
                this.photoCategory = result.body.message;
            })
        },
        getPhotos(){
            this.$http.get("http://127.0.0.1/vue.js/项目练习/api/json/photos.json").then(result => {
                this.list = result.body.message;
            })
        }
    }
}
</script>
<style lang="less" scoped>
    * {
      padding: 0px;  
      margin: 0;
    }
    .mui-scroll-wrapper{
        touch-action: none;
    }
    ul {
        padding: 0;
        margin: 10px 10px;
        list-style-type: none;
        vertical-align: middle;
        li{
           position: relative;
           text-align: center;
           color: black;
           margin: 10px 0px;
           box-shadow: -1px -1px 8px #888888;
           img{
               vertical-align: middle;
           }
           img[lazy=loading] {
                width: 40px;
                height: 300px;
                margin: auto;
            }
           .info{
               position: absolute;
               bottom: 0px;
               color: white;
               text-align: left;
               background-color:rgba(0, 0, 0, .4);
               max-width: 84px;
               .title{
                   font-size: 14px;
               }
               .body{
                   font-size: 13px
               }
           }
        }
    }
</style> 